<template>
  <el-container style="height: 100vh;overflow-y: hidden">
    <el-aside
        style="height:100%;overflow-y: hidden; width:auto;" class="bar-color">
      <el-menu default-active="2" :collapse="isCollapse"
               @open="handleOpen"
               @close="handleClose"
               :class="menuClass"
               router>
        <!--头部-->
        <div class="header text-center align-middle nav-color">
          <a href="javascript:;" class="logo text-decoration-none">
            <span>{{isCollapse?'EA':'EasyAPI'}}</span>
          </a>
        </div>

        <!--头像-->
        <div class="aside-item d-flex">
          <div class="a-info-left">
            <a href="javascript:;" class="text-decoration-none">
              <img class="header-img" :src="src" alt="">
            </a>
          </div>
          <div class="a-info-right">
            <div class="info-text" style="font-weight: 500;">{{uname}}</div>
            <div class="info-text" style="font-size: 14px;"><i class="status"></i> 在线</div>
          </div>
        </div>

        <!--搜索-->
        <div class="aside-search" :class="{hide:isCollapse}">
          <el-input v-model="search" placeholder="搜索菜单">
            <template #append class="border-0">
              <el-button class="fa fa-search" size="mini" type="primary"
                         plain></el-button>
            </template>
          </el-input>
        </div>
        <div style="height:100vh">
          <el-scrollbar>
            <!-- 菜单按钮部分-->
            <tree-menu :list='list'></tree-menu>
          </el-scrollbar>
        </div>

      </el-menu>

    </el-aside>
    <el-container>

      <el-header class="header p-0 overflow-hidden nav-color">
        <div class="d-flex justify-content-between header-content">
          <a href="javascript:;" class="text-decoration-none">
            <div class="menu text-center menu-hover" @click="collapse(isCollapse)">
              <el-icon><i class="fa fa-menu"></i></el-icon>
            </div>
          </a>

          <!--面包屑-->
          <div></div>
          <!--头部右侧导航-->
          <div class="d-flex text-center">
            <a href="javascript:;" class="text-decoration-none">
              <div class="menu menu-hover" @click="a1">
                <el-icon>
                  <i class="fa fa-home"></i>
                </el-icon>
              </div>
            </a>
            <a href="javascript:;" class="text-decoration-none">
              <div class="menu menu-hover">
                <el-dropdown trigger="click">
										<span class="el-dropdown-link">
											<el-icon>
												<i class="fa fa-delete"></i>
											</el-icon>
										</span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
                      <el-dropdown-item :icon="CirclePlusFilled">
                        Action 2
                      </el-dropdown-item>
                      <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
                      <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
                      <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </a>
            <a href="javascript:;" class="text-decoration-none">
              <div class="d-flex menu-hover" @click="a1" style="height: 3.125rem;padding: 0 0.75rem">
                <img class="header-img-sm" :src="src" alt="">
                <div class="info-text-sm icon-color">{{uname}}</div>
              </div>
            </a>
            <a href="javascript:;" class="text-decoration-none">
              <div class="menu menu-hover" style="margin-left: 16px" @click="drawer = true">
                <el-icon>
                  <i class="fa fa-setting"></i>
                </el-icon>
              </div>
            </a>
          </div>
        </div>
      </el-header>


      <el-main class="ea-main">
        <!-- 路由容器  name为路由组件中的名称,这里避免app页面二次加载-->
        <router-view></router-view>
        默认
      </el-main>
      <!--右侧抽屉-->
      <el-drawer v-model="drawer" title="I am the title" :with-header="false">
        <div class="el-row">
          <div class="el-col el-col-12 el-col-xs-12 card" @click="chooseTheme('green')">
            <div class="card-content">
              <div class="card-l theme-black"></div>
              <div class="card-t theme-green"></div>
            </div>
          </div>
          <div class="el-col el-col-12 el-col-xs-12 card" @click="chooseTheme('blue')">
            <div class="card-content">
              <div class="card-l theme-black"></div>
              <div class="card-t theme-blue"></div>
            </div>
          </div>
          <div class="el-col el-col-12 el-col-xs-12 card"  @click="chooseTheme('purple')">
            <div class="card-content">
              <div class="card-l theme-black"></div>
              <div class="card-t theme-purple"></div>
            </div>
          </div>
          <div class="el-col el-col-12 el-col-xs-12 card" @click="chooseTheme('red')">
            <div class="card-content">
              <div class="card-l theme-black"></div>
              <div class="card-t theme-red"></div>
            </div>
          </div>
          <div class="el-col el-col-12 el-col-xs-12 card" @click="chooseTheme('yellow')">
            <div class="card-content">
              <div class="card-l theme-black"></div>
              <div class="card-t theme-yellow"></div>
            </div>
          </div>
          <div class="el-col el-col-12 el-col-xs-12 card" @click="chooseTheme('pink')">
            <div class="card-content">
              <div class="card-l theme-black"></div>
              <div class="card-t theme-pink"></div>
            </div>
          </div>
        </div>
      </el-drawer>
    </el-container>
  </el-container>


</template>

<script>
import {defineComponent, ref} from 'vue'
import {chooseTheme} from "@/assets/ts/setColor.js";
import {getMenus} from '@/api/apiRequest.js'
import TreeMenu from '@/components/TreeMenu.vue'

export default defineComponent({
  name: 'app',
  components: {
    TreeMenu
  },
  setup() {
    // 动态修改自动定义颜色
    const setCssVar = (prop, val, dom = document.documentElement) => {
      dom.style.setProperty(prop, val)
    }

    //抽屉
    const drawer = ref(false)

    const isCollapse = ref(false); //折叠菜单
    const collapse = (collapse) => {
      if (collapse == true) {
        isCollapse.value = false;
      } else {
        isCollapse.value = true;
      }
    }


    const menuClass = ref();
    if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
      console.log('phone')
      setCssVar('--ea-main-padding', '10px');
      menuClass.value = 'ea-phone-menu'
    } else {
      setCssVar('--ea-main-padding', '20px');
      menuClass.value = 'ea-pc-menu'
    }



    // const handleOpen = (key: string ) => {
    //     console.log(key)
    // }
    // const handleClose = (key: string) => {
    //     console.log(key)
    // }
    // let routeName= ref('Index');
    // const getRoute = (val) => {
    //     routeName.value = val;
    // }

    let src = new URL('../../assets/img/header.jpg', import.meta.url).href //头像
    let uname = 'Admin'


    /**----路由菜单----**/
    const list = ref(Array);
    //接口部分
    (async () => {
      const {data} = await getMenus()
      list.value = data;
    })();



    /**----路由菜单----**/
    return {
      isCollapse,
      menuClass,
      collapse,
      src,
      uname,
      list,
      drawer,
      chooseTheme
    }
  }
})
</script>

<style scoped>
.el-header {
  position: relative;
}

.header {
  height: 3.125rem;
  line-height: 3.125rem;
}

.logo {
  font-size: 1.25rem;
  line-height: 3.125rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: var(--el-color-white) !important;
}

.aside-item {
  height: 4rem;
  line-height: 4rem;
  padding: 0.5rem;
}

.aside-search {
  padding: 0.625rem 0.5rem;
  height: 3.75rem;
}


.a-info-left,
.a-info-right {
  height: 3rem;
  overflow: hidden;
  transition: all 0.5s;

}

.a-info-left {
  width: 3rem;
}

.a-info-right {
  flex: 1;
}

img,
svg {
  vertical-align: initial !important;
}

.header-img {
  width: 3rem;
  height: 3rem;
  border-radius: 3rem;
}

.status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 6px;
  background: var(--ea-theme-color);
}

.info-text {
  height: 1.5rem;
  line-height: 1.5rem;
  padding-left: 1rem;
}

.hide {
  height: 0px !important;
  padding: 0px !important;
  overflow: hidden;
}


/**头部标签**/
.menu {
  width: 2.5rem;
  line-height: 3.125rem;
  vertical-align: middle;
  font-weight: bold;
  color: var(--el-color-black) !important;
}

.menu .el-dropdown-link {
  color: var(--el-color-black) !important;
  width: 2.5rem !important;
  line-height: 3.125rem !important;
  display: block;
}

.header-img-sm {
  width: 2rem;
  height: 2rem;
  line-height: 3.125rem;
  border-radius: 2rem;
  margin: 0.56rem 0;
}

.info-text-sm {
  height: 3.125rem;
  padding-left: 0.5rem;
  line-height: 2.875rem;
  color: var(--el-color-black);
}
.ea-main {
  background-color: var(--el-color-info-light-8);
  padding: var(--ea-main-padding)!important;
}



::v-deep .el-drawer.rtl {
  top: 50px !important;
  height: auto !important;
  width: 200px!important;
}



.card-content{
  margin: 5px;
  position: relative;
  display: block;
  /*background: #67C23A;*/
  height: 50px;
  background: #f4f5f7;
}
.card-t {
  width: 100%;
  height: 15px;
  top: 0;
  position: absolute;
}
.card-l{
  width: 25%;
  height: 35px;
  left: 0;
  bottom: 0;
  position: absolute;
}

.theme-green{
  background: #67C23A;
}

.theme-blue{
  background: #409EFF;
}

.theme-black{
  background: #000000;
}
.theme-purple{
  background: #6954F0;
}

.theme-red{
  background: #F75444;
}
.theme-yellow{
  background: #E79411;
}
.theme-pink{
  background: #F5549F;
}


/*动态主题颜色*/
.menu-hover:hover {
  background: var(--ea-theme-hover-color);
}

.fa,.icon-color{
  color: var(--ea-theme-font-color);
}

.bar-color {
  background-color: var(--ea-theme-bar-color);
}

.nav-color {
  background-color: var(--ea-theme-color);
}

</style>

<style lang="scss" scoped>
::v-deep .el-menu {
  color: var(--el-color-white) !important;
  border: 0px !important;
  background-color: var(--ea-theme-bar-color)!important;
  &:not(.el-menu--collapse) {
    min-height: 48px;
  }

  .is-active{
    background: var(--ea-theme-color)!important;
  }
  .el-menu-item {
    background: var(--ea-theme-bar-color);
    color: var(--ea-theme-font-color) !important;
    height: 3rem !important;
    line-height: 3rem !important;

    &:hover {
      background-color: var(--ea-theme-hover-color) !important;
    }
  }

  .el-sub-menu {
    .el-sub-menu__title {
      background: var(--ea-theme-bar-color);
      color: var(--ea-theme-font-color) !important;
      height: 3rem !important;
      line-height: 3rem !important;

      &:hover {
        background-color: var(--ea-theme-hover-color) !important;
      }
    }

    .el-tooltip__trigger {
      .el-icon {
        margin: 0 !important;
      }

      span {
        display: none;
      }

      .el-sub-menu__icon-arrow {
        display: none;
      }
    }
  }
}

.ea-pc-menu {
  &:not(.el-menu--collapse) {
    width: 266px;
  }
}


.ea-phone-menu {
  border: 0px !important;

  &:not(.el-menu--collapse) {
    width: 266px;
  }

  ::v-deep .el-sub-menu {
    .el-menu-item {
      padding-left: 40px !important;
    }
  }
}

</style>

